<template>
  <div class="home">
    <van-search
      @click="openPopup"
      shape="round"
      background="#fff"
      disabled
      placeholder="请输入搜索关键词"
    />
    <transition name="slide">
      <router-view></router-view>
    </transition>
    <banner :bannerImgArr="bannerImgArr"></banner>
    <channel :channelarr="channelArr"></channel>
    <brand :picArr="picArr"></brand>
    <New :newArr="newArr"></New>
    <hot :hotArr="hotArr"></hot>
    <Topic :topicList="topicList" />
    <Living v-for="(item, index) in livingArr" :key="index" :item="item" />
  </div>
</template>

<script>
import { GetHomeDataApi } from "../request/api";
import Banner from "@/components/home/Banner";
import Channel from "@/components/home/Channel";
import Brand from "@/components/home/Brand";
import New from "@/components/home/New";
import Hot from "@/components/home/Hot";
import Topic from "@/components/home/Topic";
import Living from "@/components/home/Living";
export default {
  name: "Home",
  data() {
    return {
      // banner的图片数组
      bannerImgArr: [],
      // channel的数组
      channelArr: [],
      picArr: [],
      newArr: [],
      hotArr: [],
      topicList: [],
      livingArr: [],
    };
  },
  components: {
    Banner,
    Channel,
    Brand,
    New,
    Hot,
    Topic,
    Living,
  },
  // 一般做数据请求都是在created
  created() {
    GetHomeDataApi().then((res) => {
      // console.log(res);
      // console.log(res.data.data.banner);
      // if (res.errno == 0) {
      // console.log(res.data)
      this.bannerImgArr = res.data.banner;
      this.channelArr = res.data.channel;
      this.picArr = res.data.brandList;
      this.newArr = res.data.newGoodsList;
      this.hotArr = res.data.hotGoodsList;
      this.topicList = res.data.topicList;
      this.livingArr = res.data.categoryList;
      // console.log(this.livingArr);
      // }
    });
  },
  methods: {
    openPopup() {
      this.$router.push("/home/popup");
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-cell {
  margin-bottom: 0;
}
.home {
  position: relative;
  min-height: 100%;
  padding-bottom: 60px;
}

.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 0.5s linear;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}
</style>